<template>
	<view>
		<u-navbar title="经营一张图" :background="background"></u-navbar>
		<view id="allmap"></view>

		<view class="searchBox rounded-8">
			<view class="d-flex a-center pt-3 ">
				<view style="z-index: 9;">
					<hpy-form-select
						:dataList="myPhaseList"
						text="label"
						name="value"
						v-model="tag"
						title="请选择项目阶段"
						hideBorder
						@change="changemyPhaseFn"
					/>
				</view>
				<view class="u-m-l-10 flex-1" style="z-index: 9;">
					<u-search
						placeholder="搜索"
						placeholder-color="#86909c"
						bg-color="#f2f3f5"
						@search="searchKeyFn"
						v-model="projectName"
						:show-action="false"
					></u-search>
				</view>
			</view>

			<view class=" d-flex">
				<!-- <view
					class="date"
					style="line-height: 80rpx;"
					:style="{ color: color, fontWeight: fontWeight }"
					@click="acceptDatePickerFn"
				>
					<view class="pr d-flex ">
						反馈时间
						<view class="d-flex flex-column pl-1">
							<view
								class="iconfont icon-shangjiantou "
								:class="changeColor ? 'text-primary' : 'text-success'"
								style="height: 20rpx; font-size: 22rpx; margin-top: -6rpx;"
							></view>
							<view
								class="iconfont icon-xiajiantou "
								:class="changeColor ? 'text-success' : 'text-primary'"
								style="height: 20rpx;font-size: 22rpx;margin-top: -6rpx;"
							></view>
						</view>
					</view>
				</view> -->
				<view class="operateBox">
					<u-dropdown>
						<u-dropdown-item
							v-model="rootInformationEnum"
							:title="rootInformList[rootInformationEnum].label"
							:options="rootInformList"
							@change="changeRootInformationEnumFn"
						></u-dropdown-item>
						<u-dropdown-item
							v-model="projectStage"
							:title="projectPhaseList[projectStage].label"
							:options="projectPhaseList"
							@change="changeProjectStageFn"
						></u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		</view>

		<u-popup v-model="show" mode="center" width="85%" closeable border-radius="8">
			<view class="pt-6 pb-6 px-4 line-h-lg">
				<view v-for="(item, index) in projectList" :key="index">项目名称：{{ item.projectName }}</view>

				<view>地址：{{ address }}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { rootInformList, projectPhaseList } from '@/utils/data.js';
import { busiInfoMapGetByPage, busInfoTrackPageList } from '@/api/apis.js';
export default {
	data() {
		return {
			background: {
				backgroundColor: '#fff'
			},
			map: null,
			cluster: null,
			points: [],
			projectName: '', //关键字
			rootInformList,
			projectPhaseList,
			show: false,
			address: '',
			projectList: [],
			myPhaseList: [
				{
					label: '我发布的',
					value: 'iposted'
				},
				{
					label: '我跟踪的',
					value: 'ifollowed'
				}
			],
			color: 'rgb(96, 98, 102)',
			iconColor: '#c0c4cc',
			fontWeight: 'normal',
			changeColor: false,
			projectName: '',
			projectStage: 4, //项目阶段
			rootInformationEnum: 2, //信息源
			current: 1,
			tag: 'iposted'
		};
	},
	onLoad() {
		this.getProject();
	},
	onReady() {
		this.setMap();
	},
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	},
	methods: {
		setMap() {
			// 百度地图API功能
			this.map = new BMapGL.Map('allmap');
			this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 5);
			this.map.enableScrollWheelZoom(true);
		},
		addCluster(projectList) {
			this.$nextTick(() => {
				if (this.cluster) {
					this.removeCluster();
				}
				this.cluster = new Cluster.View(this.map, {
					clusterMinPoints: 1,
					clusterMaxZoom: 16,
					updateRealTime: true,
					fitViewOnClick: true,
					clusterType: [
						[3, 10, Cluster.ClusterType.ATTR_REF, ['province']],
						[11, 12, Cluster.ClusterType.ATTR_REF, ['city', 'area']],
						[13, null, Cluster.ClusterType.GEO_FENCE, []]
						// [13, null, Cluster.ClusterType.DIS_PIXEL, 64]
					],
					clusterDictionary: (type, key) => {
						if (type === Cluster.ClusterType.GEO_FENCE) {
							var properties = REGION[key];
							if (properties && properties.center) {
								return {
									point: properties.center,
									region: properties.fence
								};
							}
						} else if (type === Cluster.ClusterType.ATTR_REF) {
							var properties = DISTRICT[key];
							if (properties && properties.center) {
								return {
									point: properties.center
								};
							}
						}
						return null;
					},
					renderClusterStyle: {
						type: Cluster.ClusterRender.DOM,
						style: {
							anchors: [0, 1],
							offsetX: -20,
							offsetY: -9.5
						},
						inject: this.getHTMLDOM
					},
					renderSingleStyle: {
						type: Cluster.ClusterRender.DOM,
						style: {
							anchors: [0, 1],
							offsetX: -20,
							offsetY: -9.5
						},
						inject: this.getHTMLDOM
					}
				});
				//点击
				this.cluster.on(Cluster.ClusterEvent.CLICK, e => {
					if (!e.isCluster) {
						this.show = true;
						this.address = e.properties.address;
						this.projectList = e.properties.repeatList;
					}
				});

				const provinceList = new Set();
				var points = Cluster.pointTransformer(projectList, function(it) {
					provinceList.add(it.province);
					return {
						point: [it.longitude * 1, it.latitude * 1],
						properties: {
							name: it.projectName,
							address: it.projectAddressName,
							province: it.province,
							city: it.city,
							busiInfoId: it.busiInfoId,
							busInfoTrackId: it.busInfoTrackId,
							repeatList: projectList.filter(item => {
								return item.longitude === it.longitude && item.latitude === it.latitude;
							})
						}
					};
				});
				// 只有一个省, 就以省为中心
				const arr = Array.from(provinceList);
				if (arr.length === 1) {
					this.map.centerAndZoom(arr[0]);
				} else {
					this.map.centerAndZoom(new BMapGL.Point(100, 34), 6);
				}
				this.cluster.setData(points);
			});
		},
		getHTMLDOM(context = {}) {
			var count = context.pointCount || 1; // 聚合中点的总数
			var type = context.type; // 聚合中点的总数
			var div = document.createElement('view');
			div.className = 'cluster-marker';
			var content = '';
			if (type !== 'geo-fence') {
				content += `<span class="cluster-marker-body">` + count + '</span>';
			} else {
				content += '<span class="cluster-marker-title"></span>';
			}

			div.innerHTML = content;
			return div;
		},
		//我发布的
		getProject() {
			busiInfoMapGetByPage({
				projectName: this.projectName,
				orderBy: this.changeColor ? 1 : 0,
				rootInformationEnum: this.rootInformationEnum == 2 ? '' : this.rootInformationEnum,
				projectStage: this.projectStage == 4 ? '' : this.projectStage,
				size: 9999
			}).then(res => {
				if (res.code == 10000) {
					this.addCluster(res.data.data);
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		//我跟踪的
		busInfoTrackPageFn() {
			busInfoTrackPageList({
				projectName: '',
				orderBy: this.changeColor ? 1 : 0,
				rootInformationEnum: this.rootInformationEnum == 2 ? '' : this.rootInformationEnum,
				projectStage: this.projectStage == 4 ? '' : this.projectStage,
				size: 9999
			}).then(res => {
				if (res.code == 10000) {
					this.addCluster(res.data.data);
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		changemyPhaseFn(e) {
			this.tag = e.value;
			if (this.tag == 'iposted') {
				this.removeCluster();
				this.getProject();
			} else {
				this.removeCluster();
				this.busInfoTrackPageFn();
			}
		},
		//我发布的
		iPostedFn() {
			this.removeCluster();
			this.getProject();
		},
		//我跟踪的
		ifollowedFn() {
			this.removeCluster();
			this.busInfoTrackPageFn();
		},
		searchKeyFn() {
			if (this.tag == 'iposted') {
				this.removeCluster();
				this.getProject();
			} else {
				this.removeCluster();
				this.busInfoTrackPageFn();
			}
		},
		// 移除聚合数据
		removeCluster() {
			this.cluster && this.cluster.destroy();
			this.cluster = null;
		},

		//点击发布时间
		acceptDatePickerFn() {
			this.changeColor = !this.changeColor;
			this.color = this.changeColor ? '#4e5969' : '#606266';
			this.fontWeight = this.changeColor ? '700' : 'normal';
			this.iconColor = this.changeColor ? '#4e5969' : '#c0c4cc';
			if (this.tag == 'iposted') {
				this.iPostedFn();
			} else {
				this.ifollowedFn();
			}
		},
		changeRootInformationEnumFn(e) {
			this.rootInformationEnum = e;
			if (this.tag == 'iposted') {
				this.iPostedFn();
			} else {
				this.ifollowedFn();
			}
		},
		//点击下拉选
		changeProjectStageFn(e) {
			this.projectStage = e;
			if (this.tag == 'iposted') {
				this.iPostedFn();
			} else {
				this.ifollowedFn();
			}
		},
		//返回
		backFn() {
			if (this.$Route.query.index) {
				this.$Router.replaceAll({
					path: '/pages/home/index'
				});
			} else {
				console.log('object');
				this.$Router.replaceAll({
					path: '/pages/infoManagement/index'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
#allmap {
	width: 100%;
	height: 100vh;
}

.searchBox {
	position: absolute;
	top: 200rpx;
	padding: 0 30rpx;
	width: 680rpx;
	margin: 0 30rpx;
	background-color: #fff;
	// z-index: 10;
	.operateBox {
		width: 320rpx;
	}
}
::v-deep .u-dropdown__content {
	width: 676rpx;
	left: -174rpx;
}
::v-deep .u-dropdown__content__mask {
	background: rgba(0, 0, 0, 0) !important;
}

::v-deep .uicon-search {
	color: #0052d9 !important;
}
::v-deep .u-dropdown__menu__item__text ::after {
	font-family: 'iconfont';
	content: '\eb6d';
	padding-left: 10rpx;
	color: #0052d9;
	font-size: 20rpx;
}
::v-deep .u-dropdown__menu__item__arrow {
	display: none;
}

.barBnt {
	position: fixed;
	top: 320rpx;
	right: 50rpx;
	background-color: #fff;
	z-index: 1;
}

::v-deep .cluster-marker-title {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: skyblue;
	border-radius: 5px 0 0 0;
	cursor: pointer;
	background: url('../../static/img/icon-locate.png') no-repeat;
	background-size: 100% 100%;
}
::v-deep .cluster-marker-body,
.cluster-marker-body-content {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	white-space: nowrap;
	border-radius: 50%;
	background-color: #0052d9;
}
::v-deep .select-picker {
	width: 200rpx;
}

::v-deep .u-content {
	height: 80rpx !important;
	border-radius: 8px !important;
}
</style>
